iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 22

Day22【主題五:濾鏡、混合、裁切與遮罩】混合背景/裁切與遮罩

  • 分享至 

  • xImage
  •  

一、混合背景

  • backgroubd-blend-mode屬性可將元素的背景由多張影像圖片重疊。
  • 背景圖的混合是由下到上運作的。
  • 背景是獨立(isolation)混合的。但也能透過mix-blend-mode設定混合的規則。背景獨立混合後的結果,還可以在與元素背後的東西混合。
  • 獨立混合:可打多個元素混合併視為一個整體,可以使用isolation屬性。(要設在祖先元素上)
  • 只要是元素產生堆疊的環境,不管isolation設定什麼數值,自然是獨立的。(p968)

二、裁切與遮罩

  • clip-path可以定義出一個裁切的形狀,是元素的內部區域,使用者可以看到的地方。
  • 預設值是none,不做任何裁切。
  • 裁切並不會改變元素大小,只會限制元素實際繪制的內容。
  • 裁切形狀:
  1. inset() 矩形
  2. circle() 圓形
  3. ellipse() 橢圓形
  4. polygon() 多邊形

上一篇
Day21【主題五:濾鏡、混合、裁切與遮罩】合成與混合
下一篇
Day23【主題五:濾鏡、混合、裁切與遮罩】裁切方框/裁切填充規則/遮罩
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言